<script setup lang="ts">
import dayjs from "dayjs";
import { onMounted, ref } from 'vue';
import { getSecondContractRecord, getTodayProfit } from '/@/apis/userApi';
import { useUserId } from '/@/hooks/index';
import { useRequest } from 'vue-request';
import PickeDate from './PickeDate.vue';
const { getUserId } = useUserId();
const userId = getUserId();
const dataList = ref<any[]>([]);
const totalProfit = ref(0);
const todayProfitAmount = ref(0);
const params = ref({ 
  member: userId,
  pageNum: 1,
  pageSize: 10,
  startDate: '',
  endDate: '',
});
const showPicker = ref(false);
const pickeDate = ref([]);
const list = ref([
  { name: 'All', value: '' },
  { name: 'Teams', value: 'TeamIncom' },
  { name: 'Deposit', value: 'deposit' },
  { name: 'Withdraw', value: 'withdraw' },
]);
const onPickeDate = (data: any) => {
  params.value.startDate =  data[0];
  params.value.endDate =  data[1];
  params.value.pageNum = 1;
  dataList.value = [];
  onLoadData();
}
const finished = ref(false);
const loading = ref(false);
const getData = () => {
  loading.value = true;
  useRequest(getSecondContractRecord, {
    defaultParams: [params.value],
    onSuccess(result: any) {
      loading.value = false;
      if (result.length != params.value.pageSize) {
        finished.value = true;
      } else {
        params.value.pageNum++;
      }
      dataList.value = dataList.value.concat(result)
    },
    onError() {
      finished.value = true;
      dataList.value = [];
    }
  })
}
const onLoadData = () => {
  finished.value = false;
  getData();
}
onMounted(() => {
  onLoadData();
  useRequest(getTodayProfit, {
    defaultParams: [{ member: getUserId() }],
    onSuccess(data: any) {
      totalProfit.value = data.totalProfitAmount.toFixed(2);
      todayProfitAmount.value = data.todayProfitAmount.toFixed(2);
    },
  });
});
</script>

<template>
  <div class="overview">
    <div class="profit-box flex-between">
      <div>
        <p class="funds">{{ todayProfitAmount || 0 }}</p>
        <div class="align-center">
          <div class="icon-box">
            <Icon class="icon" name="icon-todayprofit"></Icon>
          </div>
          {{ $t('Todayprofit') }} ($)
        </div>
      </div>
      <div class="line"></div>
      <div>
        <p class="funds">{{ totalProfit || 0 }}</p>
        <div class="align-center">
          <div class="icon-box">
            <Icon name="icon-totalprofit"></Icon>
          </div>
          {{ $t('Totalprofit') }} ($)
        </div>
      </div>
    </div>
    <div class="history">
      <div class="title">{{ $t('History') }}</div>
      <div class="select_box">
        <PickeDate @click="onPickeDate"></PickeDate>
        <!-- <div class="change_type">
          <div class="all" v-if="!params.filters.change_type">
            {{ $t('All') }}
          </div>
          <var-select v-model="params.filters.change_type">
            <var-option :label="$t(item.name)" :value="item.value" v-for="(item, index) in list" :key="index" />
          </var-select>
        </div> -->
      </div>
      <van-list v-if="dataList.length"  v-model:loading="loading" :finished="finished" :finished-text="dataList.length ? $t('list_load_finished') : ''" :loading-text="$t('list_loading')" @load="onLoadData">
        <div class="history-list">
          <div class="li" v-for="item in dataList" :key="item.id">
            <div class="box">
              <div class="p1">
                <p class="mr-10" :class="item.buyStatus === 1 ? 'font_green' : 'font_red'">
                  {{ item.buyStatus === 1 ? '↑' : '↓' }}
                </p>
                <p
                  >{{ item.newPairsName || item.pairsName }} {{ item.seconds }} {{ item.secondsTime }}
                  {{ $t('Contract') }}</p
                >
              </div>
              <div class="mtb-20">
                <span>{{ $t('Original') }} : </span>
                <span class="bold">{{ item.amount }}</span>
              </div>
              <div class="flex-between">
                <div class="align-center">
                  <span>{{ $t('profitable') }} : </span>
                  <p :class="item.settleStatus != '2' && (item.isWin === 1 ? 'font_green' : item.isWin === 2 ? 'font_red' : '')">
                    <span v-if="item.settleStatus != '2'">
                      <span v-if="item.isWin === 2">-</span> <span v-if="item.isWin === 1">+</span>
                    </span>
                    {{ item.settleStatus != '2' ? item.profit : $t('Waiting') }}
                  </p>
                </div>
                <p class="p2">{{ $YMDHms(item.settleTime) }}</p>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <van-empty v-else :description="$t('Nodata')" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.overview {
  height: 100%;
  .profit-box {
    border-radius: 15px;
    background: rgb(0, 99, 245);
    padding: 26px;
    color: #fff;
    margin: 30px 0;
    font-size: 26px;

    .funds {
      font-size: 36px;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .icon-box {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;
      @include center;
      margin-right: 4px;

      .icon {
        font-size: 18px;
        color: #0063f5;
      }
    }

    .line {
      width: 2px;
      height: 100px;
      background: rgba(255, 255, 255, 0.3);
    }
  }

  .history {
    .title {
      font-size: 40px;
      font-weight: 500;
      margin-bottom: 15px;
    }
  }

  .select_box {
    display: flex;
    margin-bottom: 20px;
    font-size: 28px;

    .pickeDate {
      color: rgb(255, 255, 255, 0.65);
      margin-right: 10px;
      @include center;

    }

    .change_type {
      min-width: 40%;
      position: relative;
      @include center;
      color: rgb(255, 255, 255, 0.65);
    }
  }

  .history-list {
    .li {
      border: 1px dashed #dfdfe0;
      margin-bottom: 20px;
      .box {
        background: #242424;
        border-radius: 16px;
        padding: 27px 29px;
        color: rgba(255, 255, 255, 0.85);
        .p1 {
          display: flex;
          margin-top: 18px;
          margin-bottom: 20px;
          font-weight: 800;
          .mr-10 {
            margin-right: 10px;
          }
        }
        .p2 {
           color: rgba(255, 255, 255, 0.45);
        }
        .bold {
          font-weight: 700;
        }
        .font_green {
          color: rgb(45, 189, 133);
        }
        .font_red {
          color: rgb(246, 69, 93);
        }
        .mtb-20 {
          margin: 20px 0;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.overview {
  .var-field-decorator--standard .var-field-decorator__middle {
    padding: 0;
  }

  .var-field-decorator__line {
    display: none;
  }
}

.var-option__text {
  height: 100px;
}

.var-select__scroller {
  min-width: 280px;
}
</style>